<template>
    <div>
        111
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>

</style>

<!-- <template>
    <div class="agree-container">
        <div v-for="item in data" :key="item.id" class="agree-item">
            <router-link class="user-avatar">
                <img class="avatar-item" :src="item.user.avatar" :alt="item.user.name">
            </router-link>

            <div class="main">
                <div class="info">
                    <div class="user-info">
                        <router-link>{{ item.user.name }}</router-link>
                    </div>

                    <div class="interaction-hint">
                        <span>{{ interactionText(item) }}</span>
                        <span>{{ formatTime(item.time) }}</span>
                    </div>

                    <div class="interaction-content">
                        <span>{{ item.target }}</span>
                    </div>

                    <div v-if="item.targetType === '评论'" class="quote-info">
                        {{ item.content }}
                    </div>
                </div>

                <div class="extra">
                    <img class="extra-image" :src="item.previewImage" alt="预览图">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
    data: {
        type: Array as () => AgreementItem[],
        required: true
    }
})

type AgreementItem = {
    id: number
    type: 'like' | 'collect'
    targetType: string
    user: {
        name: string
        avatar: string
    }
    target: string
    time: string
    content?: string
    previewImage?: string
}

const interactionText = (item: AgreementItem) => {
    const actions = {
        like: '赞了您的',
        collect: '收藏了您的'
    }
    return `${actions[item.type]}${item.targetType} • `
}

const formatTime = (time: string) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
}
</script>

<style lang="less" scoped>
.agree-container {
    width: 100%;

    .agree-item {
        display: flex;
        flex-direction: row;
        padding-top: 24px;

        .user-avatar {
            margin-right: 24px;
            flex-shrink: 0;

            .avatar-item {
                width: 48px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 100%;
                border: 1px solid rgba(0, 0, 0, 0.08);
                object-fit: cover;
            }
        }

        .main {
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            flex-direction: row;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            width: 100%;

            .info {
                flex-grow: 1;
                flex-shrink: 1;

                .user-info {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 4px;

                    a {
                        color: #333;
                        font-size: 16px;
                        font-weight: 600;
                    }
                }

                .interaction-hint {
                    font-size: 14px;
                    color: rgba(51, 51, 51, 0.6);
                    margin-bottom: 8px;
                }

                .interaction-content {
                    display: flex;
                    font-size: 14px;
                    color: #333;
                    line-height: 140%;
                    cursor: pointer;
                    margin-bottom: 12px;
                }

                .quote-info {
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    color: rgba(51, 51, 51, 0.6);
                    margin-bottom: 12px;
                    cursor: pointer;
                    padding: 8px;
                    background: rgba(0, 0, 0, 0.03);
                    border-radius: 4px;
                }
            }

            .extra {
                min-width: 48px;
                flex-shrink: 0;
                margin-left: 24px;

                .extra-image {
                    cursor: pointer;
                    width: 48px;
                    height: 48px;
                    border: 1px solid rgba(0, 0, 0, 0.02);
                    border-radius: 6px;
                    object-fit: cover;
                }
            }
        }
    }
}
</style> -->